<template>
  <div class="activity-management">
    <h1>活动管理</h1>
    
    <div class="add-activity">
      <h2>添加新活动</h2>
      <form @submit.prevent="handleSubmit" class="activity-form">
        <div class="form-group">
          <label>标题：</label>
          <input v-model="newActivity.title" required>
        </div>
        <div class="form-group">
          <label>日期：</label>
          <input type="date" v-model="newActivity.date" required>
        </div>
        <div class="form-group">
          <label>地点：</label>
          <input v-model="newActivity.location" required>
        </div>
        <div class="form-group">
          <label>描述：</label>
          <textarea v-model="newActivity.description" required></textarea>
        </div>
        <button type="submit">添加活动</button>
      </form>
    </div>

    <div class="activities-list">
      <h2>活动列表</h2>
      <div v-for="activity in activities" :key="activity.id" class="activity-item">
        <div class="activity-content">
          <h3>{{ activity.title }}</h3>
          <p><strong>日期：</strong>{{ activity.date }}</p>
          <p><strong>地点：</strong>{{ activity.location }}</p>
          <p><strong>描述：</strong>{{ activity.description }}</p>
        </div>
        <div class="activity-actions">
          <button @click="editActivity(activity)" class="edit-btn">编辑</button>
          <button @click="deleteActivity(activity.id)" class="delete-btn">删除</button>
        </div>
      </div>
    </div>

    <!-- 编辑活动对话框 -->
    <div v-if="showEditDialog" class="edit-dialog">
      <div class="dialog-content">
        <h2>编辑活动</h2>
        <form @submit.prevent="handleEdit" class="activity-form">
          <div class="form-group">
            <label>标题：</label>
            <input v-model="editingActivity.title" required>
          </div>
          <div class="form-group">
            <label>日期：</label>
            <input type="date" v-model="editingActivity.date" required>
          </div>
          <div class="form-group">
            <label>地点：</label>
            <input v-model="editingActivity.location" required>
          </div>
          <div class="form-group">
            <label>描述：</label>
            <textarea v-model="editingActivity.description" required></textarea>
          </div>
          <div class="dialog-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" @click="showEditDialog = false" class="cancel-btn">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import activities from '@/data/activities.json'

export default {
  name: 'ActivityManagementView',
  data() {
    return {
      activities: [...activities],
      newActivity: {
        title: '',
        date: '',
        location: '',
        description: ''
      },
      showEditDialog: false,
      editingActivity: null
    }
  },
  methods: {
    handleSubmit() {
      const activity = {
        ...this.newActivity,
        id: this.activities.length + 1
      }
      this.activities.push(activity)
      
      // 重置表单
      this.newActivity = {
        title: '',
        date: '',
        location: '',
        description: ''
      }
    },
    editActivity(activity) {
      this.editingActivity = { ...activity }
      this.showEditDialog = true
    },
    handleEdit() {
      const index = this.activities.findIndex(a => a.id === this.editingActivity.id)
      if (index !== -1) {
        this.activities[index] = { ...this.editingActivity }
      }
      this.showEditDialog = false
    },
    deleteActivity(id) {
      if (confirm('确定要删除这个活动吗？')) {
        this.activities = this.activities.filter(a => a.id !== id)
      }
    }
  }
}
</script>

<style scoped>
.activity-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.activity-form {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

textarea {
  height: 100px;
  resize: vertical;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

button[type="submit"] {
  background-color: #42b983;
}

button[type="submit"]:hover {
  background-color: #3aa876;
}

.activities-list {
  margin-top: 40px;
}

.activity-item {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.activity-content {
  flex: 1;
}

.activity-actions {
  margin-left: 20px;
}

.edit-btn {
  background-color: #2c3e50;
  margin-right: 10px;
}

.delete-btn {
  background-color: #dc3545;
}

.edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
}

.dialog-actions {
  margin-top: 20px;
  text-align: right;
}

.save-btn {
  background-color: #42b983;
  margin-right: 10px;
}

.cancel-btn {
  background-color: #6c757d;
}
</style> 